<template>
  <div class="help-center">
    <el-row class="help-container">
      <el-col :span="4" class="help-nav">
        <h2 class="nav-title">帮助中心</h2>
        <el-menu
          router
          :default-active="activeMenu"
          class="help-menu"
        >
          <el-menu-item index="/admin/help/forward-guide">
            <el-icon><Document /></el-icon>
            <span>转发功能指南</span>
          </el-menu-item>
          <!-- 可以添加更多菜单项 -->
        </el-menu>
      </el-col>
      <el-col :span="20" class="help-content">
        <router-view />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { Document } from '@element-plus/icons-vue'

export default {
  name: 'HelpCenter',
  components: {
    Document
  },
  setup() {
    const route = useRoute()
    
    // 根据当前路由确定激活的菜单项
    const activeMenu = computed(() => {
      return route.path
    })

    return {
      activeMenu
    }
  }
}
</script>

<style scoped>
.help-center {
  height: 100%;
  padding: 20px;
}

.help-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 100%;
  overflow: hidden;
}

.help-nav {
  background: #f5f7fa;
  border-right: 1px solid #e6e6e6;
  height: 100%;
  padding-top: 20px;
}

.nav-title {
  color: #303133;
  font-size: 18px;
  margin: 0 0 20px;
  padding: 0 20px;
}

.help-menu {
  border-right: none;
}

.help-content {
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}
</style> 